<template>
  <div class="journal_upload">
    <div class="label-top hasAnimation">
      <span
        @click="upload()"
        class="uploadbtn"
      >+{{ $t('_log.upload') }}：</span>
      <span>{{ $t('_log.uploadsize') }}</span>
    </div>
    <div class="uploadbox">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="upload_items"
      >
        <downloadItem :data="item" />
        <i
          @click="del(index)"
          class="del jeicon jeicon-new-fine-plus-circle"
        />
      </div>
    </div>
  </div>
</template>

<script>
import VueI18n from 'vue-i18n';
import downloadItem from './downloadItem';
import getLang from '../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [{ name: '_log', data: require('../assets/lang/log/zh') }]), // 中文语言包
    en: getLang('en', [{ name: '_log', data: require('../assets/lang/log/en') }]), // 英文语言包
  },
});

export default {
  name: 'Index',
  components: { downloadItem },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    max: {
      type: Number,
      default: () => 10,
    },
  },
  i18n,
  methods: {
    emit() {
      this.$emit('upload');
    },
    upload() {
      if (this.list.length > 5) {
        return JE.msg(this.$t('alert.uploadmaxnum'));
      }
      const that = this;
      JE.uploadFile({
        multiSelect: true,
        fileCount: this.max - that.list.length,
        width: '800px',
        height: '600px',
        // fileSize: '30',
        // params: {
        //   returnType: 'all',
        //   jeFileType: 'PROJECT',
        // },
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file) {
          // const { docInfo } = file;
          // const obj = {
          //   name: docInfo.DOCUMENT_DOCNAME,
          //   path: docInfo.DOCUMENT_ADDRESS,
          //   cls: docInfo.DOCUMENT_ICONCLS,
          //   id: '',
          //   extend: docInfo.DOCUMENT_THUMBNAILCLS,
          // };
          const obj = {
            name: file.name,
            path: file.url,
          };
          that.list.push(obj);
        },
      });
      this.$emit('upload', this.list);
    },
    del(index) {
      this.list.splice(index, 1);
      this.$emit('upload', this.list);
    },
  },
};
</script>

<style lang="less" scoped>
  .journal_upload {
    .uploadbox{
      border: 1px solid #E4E7ED;
      height: 101px;
      padding: 10px;
      border-radius: 4px;
      transition: all 500ms;
      &:hover {
        border-color: #C0C4CC;
      }
      .upload_items {
        width: 70px;
        float: left;
        cursor: pointer;
        position: relative;
        &:not(:first-child) {
          margin-left: 10px;
        }
        .del {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 11px;
          transform: rotate(45deg);
          color: red;
        }
      }
      &:after {
        content: '';
        display: table;
        clear: both;
      }
    }
  }
</style>
